<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术文档 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <img src="img/python-logo.png" alt="Python工业预测模型Logo">
                <span>异烟酸生产收率预测</span>
            </div>
            <nav class="nav-menu">
                <a href="index.html" class="nav-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="qd-display.html" class="nav-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>主控面板</span>
                </a>
                <a href="model-value.html" class="nav-item">
                    <i class="fas fa-chart-line"></i>
                    <span>模型应用价值</span>
                </a>
                <a href="system-architecture.html" class="nav-item">
                    <i class="fas fa-project-diagram"></i>
                    <span>系统架构设计</span>
                </a>
                <a href="data-flow.html" class="nav-item">
                    <i class="fas fa-database"></i>
                    <span>数据流设计</span>
                </a>
                <a href="model-deployment.html" class="nav-item">
                    <i class="fas fa-cogs"></i>
                    <span>模型部署与应用</span>
                </a>
                <a href="ui-design.html" class="nav-item">
                    <i class="fas fa-desktop"></i>
                    <span>用户界面设计</span>
                </a>
                <a href="yield-prediction.html" class="nav-item">
                    <i class="fas fa-flask"></i>
                    <span>收率预测</span>
                </a>
                <a href="parameter-monitoring.html" class="nav-item">
                    <i class="fas fa-eye"></i>
                    <span>关键参数监控</span>
                </a>
                <a href="online-analysis.html" class="nav-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>在线分析</span>
                </a>
                <a href="model-performance.html" class="nav-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>模型性能</span>
                </a>
                <a href="model-details.html" class="nav-item">
                    <i class="fas fa-info-circle"></i>
                    <span>模型详情</span>
                </a>
                <a href="model-update.html" class="nav-item">
                    <i class="fas fa-sync-alt"></i>
                    <span>模型更新</span>
                </a>
                <a href="model-config.html" class="nav-item">
                    <i class="fas fa-sliders-h"></i>
                    <span>系统配置</span>
                </a>
                <a href="documentation.html" class="nav-item active">
                    <i class="fas fa-book"></i>
                    <span>技术文档</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User">
                    <span>管理员</span>
                </div>
                <a href="#" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>技术文档</h1>
                    <p>异烟酸生产收率预测系统的技术文档和使用指南</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">2</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <div class="page-content">
                    <div class="section-title">技术文档目录</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-book"></i>
                            系统技术文档
                        </div>
                        <p>本页面提供异烟酸生产收率预测系统的完整技术文档，包括系统架构、数据流程、模型算法、接口说明和使用指南等内容。</p>
                    </div>
                    
                    <div class="value-cards mt-4">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">完整技术文档</div>
                                <div class="value-desc">工业生产收率预测模型技术文档（完整版）</div>
                            </div>
                            <a href="../工业预测/文档/Predictive_model_document.html" class="btn btn-primary ml-3" target="_blank">
                                <i class="fas fa-external-link-alt mr-1"></i> 查看
                            </a>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-file-code"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">API文档</div>
                                <div class="value-desc">系统API接口文档和调用示例</div>
                            </div>
                            <a href="#" class="btn btn-primary ml-3">
                                <i class="fas fa-external-link-alt mr-1"></i> 查看
                            </a>
                        </div>
                    </div>
                    
                    <div class="section-title mt-5">使用指南</div>
                    
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-user-cog"></i>
                            </div>
                            <div class="info-card-title">管理员指南</div>
                            <div class="info-card-text">
                                系统配置、用户管理、模型更新和维护指南
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-user-tie"></i>
                            </div>
                            <div class="info-card-title">决策者指南</div>
                            <div class="info-card-text">
                                数据分析、报表解读和决策支持功能使用指南
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-user-hard-hat"></i>
                            </div>
                            <div class="info-card-title">操作员指南</div>
                            <div class="info-card-text">
                                日常操作、参数监控和异常处理流程
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-tools"></i>
                            </div>
                            <div class="info-card-title">开发者指南</div>
                            <div class="info-card-text">
                                系统二次开发、接口调用和扩展功能指南
                            </div>
                        </div>
                    </div>
                    
                    <div class="section-title mt-5">常见问题</div>
                    
                    <div class="content-card">
                        <div class="collapsible">
                            <div class="collapsible-trigger">
                                <i class="fas fa-question-circle mr-2"></i>
                                系统对硬件环境有什么要求？
                                <i class="fas fa-chevron-down ml-auto"></i>
                            </div>
                            <div class="collapsible-content">
                                <p>系统推荐配置：</p>
                                <ul>
                                    <li>CPU: Intel Core i5 8代或更高</li>
                                    <li>内存: 16GB或更高</li>
                                    <li>存储: 256GB SSD</li>
                                    <li>操作系统: Windows 10/11 或 Linux</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="collapsible">
                            <div class="collapsible-trigger">
                                <i class="fas fa-question-circle mr-2"></i>
                                如何更新预测模型？
                                <i class="fas fa-chevron-down ml-auto"></i>
                            </div>
                            <div class="collapsible-content">
                                <p>更新预测模型有两种方式：</p>
                                <ol>
                                    <li>自动更新：系统会定期（默认每月）使用新收集的数据自动更新模型</li>
                                    <li>手动更新：管理员可在"模型更新"页面手动触发模型更新流程</li>
                                </ol>
                            </div>
                        </div>
                        
                        <div class="collapsible">
                            <div class="collapsible-trigger">
                                <i class="fas fa-question-circle mr-2"></i>
                                系统支持哪些数据导入方式？
                                <i class="fas fa-chevron-down ml-auto"></i>
                            </div>
                            <div class="collapsible-content">
                                <p>系统支持以下数据导入方式：</p>
                                <ul>
                                    <li>自动采集：通过OPC UA、MQTT等协议从DCS、LIMS等系统自动采集</li>
                                    <li>文件导入：支持Excel、CSV等格式文件导入</li>
                                    <li>手动录入：通过表单界面手动录入数据</li>
                                    <li>API接口：提供REST API接口供其他系统调用</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="scripts/common.js"></script>
    <script src="scripts/main-nav.js"></script>
    <script>
        // 初始化折叠面板
        document.addEventListener('DOMContentLoaded', function() {
            const collapsibles = document.querySelectorAll('.collapsible');
            
            collapsibles.forEach(collapsible => {
                const trigger = collapsible.querySelector('.collapsible-trigger');
                const content = collapsible.querySelector('.collapsible-content');
                
                if (!trigger || !content) return;
                
                // 初始状态为关闭
                content.style.maxHeight = '0';
                content.style.overflow = 'hidden';
                content.style.transition = 'max-height 0.3s ease';
                content.style.padding = '0 16px';
                
                trigger.style.cursor = 'pointer';
                trigger.style.padding = '12px 16px';
                trigger.style.display = 'flex';
                trigger.style.alignItems = 'center';
                
                trigger.addEventListener('click', () => {
                    const isOpen = collapsible.classList.contains('open');
                    
                    if (isOpen) {
                        collapsible.classList.remove('open');
                        content.style.maxHeight = '0';
                        content.style.padding = '0 16px';
                        trigger.querySelector('.fa-chevron-down').style.transform = 'rotate(0deg)';
                    } else {
                        collapsible.classList.add('open');
                        content.style.maxHeight = content.scrollHeight + 40 + 'px';
                        content.style.padding = '16px';
                        trigger.querySelector('.fa-chevron-down').style.transform = 'rotate(180deg)';
                    }
                });
            });
        });
    </script>
</body>
</html> 